<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你不理财，财不理你</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./src/main.js" defer></script>
    <link rel="stylesheet" href="./assets/css/main.css">
    <style>
        audio {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="container">
            <div class="card property">
                <div class="title">
                    <span>资产</span>
                </div>
                <div class="property-sum">
                    <div class="property-heading">
                        <img src="./assets/img/property/手头现金.png" alt="">
                        <div class="property-desc">
                            <span>手头现金</span>
                            <span>熊市、现金为王🤑</span>
                        </div>
                    </div>
                    <h3>3264元</h3>
                </div>
                <div>
                    <table class="table table-stock" >
                        <thead>
                            <tr>
                                <td>股票</td>
                                <td>股票份数</td>
                                <td>成本/份数</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="table-item stock-item">
                                        <div>
                                            <img src="./assets/img/property/稳健医疗.png" alt="">
                                        </div>
                                        <div>
                                            <span>稳健医疗</span>
                                            <span>300888</span>
                                        </div>
                                    </div>
                                </td>
                                <td>200</td>
                                <td>37.70</td>
                            </tr>
                        </tbody>

                    </table>
                    <table class="table table-share-option">
                        <thead>
                            <tr>
                                <td>期权</td>
                                <td>期权张数</td>
                                <td>成本/份数</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="table-item share-option-item">
                                        <div>
                                            <img src="./assets/img/property/伞-房子.svg" alt="">
                                        </div>
                                        <div>
                                            <span>澧县恒大期房</span>
                                            <span>14天到期作废</span>
                                        </div>
                                    </div>
                                </td>
                                <td>1</td>
                                <td>20000</td>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
            <div class="card passive-income">
                <div class="title">
                    <span>被动收入</span>
                </div>
                <div class="passive-income-container">
                    <h1>0.00</h1>
                    <img src="./assets/img/passiveIncome/乌龟.gif" alt="">
                </div>
            </div>
            <div class="card income-expenditure">
                <div class="income">
                    <div class="title">
                        <span>收入</span>
                    </div>
                    <div class="expenditure-sum">
                        <div class="expenditure-heading">
                            <img src="./assets/img/incomeExpenditure/总收入.png" alt="">
                            <div class="expenditure-desc">
                                <span>总收入</span>
                                <span>为数不多的单薄工资😋</span>
                            </div>
                        </div>
                        <h3>5600</h3>
                    </div>
                    <div class="income-items">
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/工资.png" alt="">
                                <div>
                                    <div class="heading">工资收入</div>
                                    <div class="desc">主要收入</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>5600</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="expenditure">
                    <div class="title">
                        <span>支出</span>
                    </div>
                    <div class="expenditure-sum">
                        <div class="expenditure-heading">
                            <img src="./assets/img/incomeExpenditure/总支出.png" alt="">
                            <div class="expenditure-desc">
                                <span>总支出</span>
                                <span>消费当然是越低越好😡</span>
                            </div>
                        </div>
                        <h3>2146.35</h3>
                    </div>
                    <div class="expenditure-items">
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/税款.png" alt="">
                                <div>
                                    <div class="heading">税款</div>
                                    <div class="desc">个人所得税</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>750.4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/交通.png" alt="">
                                <div>
                                    <div class="heading">交通支出</div>
                                    <div class="desc">地铁便宜</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>13</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/租房.png" alt="">
                                <div>
                                    <div class="heading">租房支出</div>
                                    <div class="desc">公司宿舍</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>450</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/信用卡.png" alt="">
                                <div>
                                    <div class="heading">信用卡支出</div>
                                    <div class="desc">谁还开信用卡</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>0</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/饮食.png" alt="">
                                <div>
                                    <div class="heading">饮食支出</div>
                                    <div class="desc">饭钱不能省吧</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>677.87</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/银行贷款.png" alt="">
                                <div>
                                    <div class="heading">银行贷款</div>
                                    <div class="desc">利息太高</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>0</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/购物.png" alt="">
                                <div>
                                    <div class="heading">购物支出</div>
                                    <div class="desc">买的都是必须品</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>25.24</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/医疗支出.png" alt="">
                                <div>
                                    <div class="heading">医疗支出</div>
                                    <div class="desc">生不起病</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>0</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/娱乐.png" alt="">
                                <div>
                                    <div class="heading">娱乐支出</div>
                                    <div class="desc">劳逸结合</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>150.87</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <img src="./assets/img/incomeExpenditure/其他.png" alt="">
                                <div>
                                    <div class="heading">其他支出</div>
                                    <div class="desc">多少花点</div>
                                </div>
                            </div>
                            <div class="num">
                                <span>34</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mine">
                <div class="title">
                    <span>我</span>
                    <section>2023/12/13 21:05:34</section>
                </div>
                <main>
                    <div class="cache-flow">
                        <img src="./assets/img/mine/现金流.png">
                        <span>现金流</span>
                        <h1 class="cache-flow-txt">
                            3459.6
                        </h1>
                    </div>
                    <ul>
                        <li class="progress">
                            <label for="read">读三本书:</label>
                            <div class="progress-bar">
                                <div class="percent">当前进度：70%</div>
                                <progress id="read" max="100" value="70">70%</progress>
                            </div>
                        </li>
                        <li class="progress">
                            <label for="read">增肌70kg:</label>
                            <div class="progress-bar">
                                <div class="percent">当前进度：30%</div>
                                <progress id="read" max="100" value="30">70%</progress>
                            </div>
                        </li>
                        <li class="progress">
                            <label for="read">早起100天:</label>
                            <div class="progress-bar">
                                <div class="percent">当前进度：26%</div>
                                <progress id="read" max="100" value="26">70%</progress>
                            </div>
                        </li>
                    </ul>
                </main>
            </div>
            <div class="card liabilities">
                <div class="title">
                    <span>负债</span>
                </div>
                <div id="liabilities-container"></div>
            </div>
        </div>
        <audio src="./assets/music/所念皆星河.mp3" autoplay controls></audio>
    </div>
</body>

</html>